<template>
    <div class="menu">
        <div class="menu-filter">
            <yl-menu-filter @onSubmit="handleInitTable" @onReset="handleResetTable"></yl-menu-filter>
        </div>
        <div class="menu-buttons">
            <yl-multi-button
                :selectedRowKeys="selectedRowKeys"
                @add="handleAddMenu"
                @multiDelete="handleMultiDelete"
                @export="handleMenuDownload"
                :hideAdd="true"
                :hideDelete="true"
            ></yl-multi-button>
        </div>
        <div class="menu-table">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :row-key="setRowKey"
                :pagination="pagination"
                :loading="loading"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :scroll="{ x: 1169, y: 540 }"
                @change="handleTableChange"
                :expandRowByClick="true"
                @expand="handleExpandRow"
                :indentSize="12"
                :expandIcon="customExpandIcon"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
                <template #outlinkSlot="{ record }">
                    <span>{{ record.iFrame ? t('yl.yes') : t('yl.no') }}</span>
                </template>
                <template #cacheSlot="{ record }">
                    <span>{{ record.cache ? t('yl.yes') : t('yl.no') }}</span>
                </template>
                <template #hiddenSlot="{ record }">
                    <span>{{ record.hidden ? t('yl.yes') : t('yl.no') }}</span>
                </template>
                <template #customAction="{ record }">
                    <a-button class="action-btn action-btn__edit" @click="handleEditMenu(record)" type="primary" size="small">
                        <template #icon>
                            <EditOutlined />
                        </template>
                    </a-button>
                    <a-popconfirm placement="topRight" @confirm="handleDelete(record.id)">
                        <template #title>
                            <p>{{ t('yl.deleteConfirmtext') }}</p>
                        </template>
                        <a-button class="action-btn action-btn__delete" type="danger" size="small">
                            <template #icon>
                                <Delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
        <yl-menu-model
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :menu="selectedRow"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-menu-model>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, reactive, toRefs, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { message } from 'ant-design-vue';
import { addMenu, editMenu, getDownload } from '@/api/system';
import { PaginationQuery } from '@/types/table';
import { RightOutlined, DownOutlined } from '@ant-design/icons-vue';
import { customExpandIcon } from '@/hooks/customExpandIcon';

import ylMenuFilter from './components/menuFilter.vue';
import ylMultiButton from '@/components/ylMultiButton.vue';
import ylMenuModel from './components/menuModel.vue';

import columns from './menuColumns';
import useTables from './menuTables';
import useDelete from './useDelete';

export default defineComponent({
    name: 'subMenu',
    components: {
        ylMenuFilter,
        ylMultiButton,
        ylMenuModel,
        RightOutlined,
        DownOutlined,
    },
    setup() {
        const { t } = useI18n();
        const { getTableData, selectedRow, visible, selectedRowKeys } = useTables;
        let { tableQuery } = useTables;

        const state = reactive({
            confirmLoading: false,
            title: computed(() => (selectedRow.value.id ? t('yl.editMenu') : t('yl.addMenu'))),
        });

        onMounted(() => {
            getTableData(tableQuery);
        });
        onUnmounted(() => {
            visible.value = false;
        });

        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            const { blurry } = query;
            const params = Object.assign({}, tableQuery, { ...query, name: blurry });
            getTableData(params);
        };
        // 重置
        const handleResetTable = () => {
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getTableData(tableQuery);
        };

        // 新增、编辑菜单
        const handleSubmit = (menu: NormalObj) => {
            state.confirmLoading = true;
            const msg = menu.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = menu.id ? editMenu(menu) : addMenu(menu);
            realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };

        // 自定义展开图标
        // const customExpandIcon = (props: NormalObj) => {
        //     if (props.expandable) {
        //         if (props.expanded) {
        //             return createVNode(DownOutlined, { class: 'custom-icon' });
        //         } else {
        //             return createVNode(RightOutlined, { class: 'custom-icon' });
        //         }
        //     } else {
        //         return createVNode('span', { class: 'empty-icon' }, '');
        //     }
        // };
        // 导出角色数据
        const handleMenuDownload = () => {
            let name = t('yl.menuMgt');
            getDownload('/api/menus/download', name);
        };
        return {
            columns,
            ...useTables,
            t,
            ...useDelete(),
            handleSubmit,
            ...toRefs(state),
            handleInitTable,
            handleResetTable,
            customExpandIcon,
            handleMenuDownload,
        };
    },
});
</script>

<style lang="scss" scoped>
.menu-table {
    :deep .custom-icon {
        color: $grey;
        padding-right: $width4;
    }
}
</style>
